import { Component } from 'react'
import PropTypes from 'prop-types'

// 需求：Colors组件接收一个数组，例如：['red','blue','green']
function Colors ({ list, a }) {
  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item} style={{ background: item, color: '#fff' }}>
            {item}
          </li>
        ))}
      </ul>
      <h2>{a}</h2>
    </div>
  )
}
Colors.defaultProps = {
  a: 1000,
}
Colors.propTypes = {
  // 父传子属性名：数据类型
  list: PropTypes.array,
  a: PropTypes.number.isRequired,
  b: PropTypes.element,
  // 1. 只校验是一个对象
  // obj: PropTypes.object,
  // 2. 即校验是个对象也可以精细化校验对象内部属性值的类型
  obj: PropTypes.shape({
    a: PropTypes.func,
    b: PropTypes.string,
  }),
}
// 类组件
class Child extends Component {
  render () {
    return (
      <div>
        <h2>类组件:{this.props.a}</h2>
      </div>
    )
  }
}

Child.propTypes = {
  a: PropTypes.number,
}

Child.defaultProps = {
  a: 100,
}
class App extends Component {
  state = {
    list: ['red', 'blue', 'green'],
    // list: 'red',
  }
  render () {
    return (
      <div>
        <h1>props校验</h1>
        <hr />
        <Colors
          list={this.state.list}
          // a={1}
          obj={{ a: () => 1, b: '2' }}
          b={<h1>hi jsx</h1>}
        />
        <Child></Child>
      </div>
    )
  }
}
export default App
